<template>
  <div class="select-category">
    <p>选择分类</p>
    <br>

    <Select
      v-model="model16"
      multiple
      placeholder="请选择分类"
      @on-change="seleceChange"
    >

      <Option
        :key="index"
        v-for="(items,index) in step"
        :value="items.id"
      >{{ items.title }}</Option>

    </Select>
    <br>
    <br>

    <p>选择模型</p>
    <br>
    <Select
      @on-change="seleceChange"
      v-model="type"
    >
      <Option :value="1">文章</Option>
      <Option :value="2">商品</Option>
    </Select>
  </div>
</template>

<script>
import { getWebCategory } from "@/api/data";
import { generateDataOptins } from "@/libs/ergodic";

export default {
  name: "select_category",
  props: ["select_category_data"],
  data() {
    return {
      layer: 5,
      model16: [],
      type: 1,
      step: [],
      list: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    init() {},
    handleOptions(index, index1, id) {
      this.$emit("on-nav-category", data);
    },
    seleceChange(res) {
      var data = {
        model: this.model16,
        type: this.type
      };
      this.$emit("on-nav-category", data);
    },
    maxTagPlaceholder(num) {
      return "一共 " + num;
    },
    getData() {
      getWebCategory().then(res => {
        this.step = generateDataOptins(res.data);
        console.log(this.step);
        this.init();
      });
    }
  }
};
</script>
<style scoped>
.select-category {
  min-height: 600px;
  width: 100%;
  overflow-x: auto;
}
.ji-lian {
  width: 100px;
  margin: 20px 25px 0 0;
  overflow: auto;
}
</style>
